<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://github.com/mineadmin
-->
<script setup lang="tsx">
import WorkbenchLogin from '@/modules/base/views/dashboard/components/workbench/workbench-login.vue'

defineOptions({ name: 'welcome' })
const userinfo = useUserStore().getUserInfo()
</script>

<template>
  <div class="mine-layout">
    <div class="flex justify-between bg-white p-3 dark-bg-dark-8">
      <div class="flex gap-x-5">
        <el-avatar :src="userinfo?.avatar" :size="80">
          <span v-if="!userinfo?.avatar" class="text-5xl">{{ userinfo.username[0].toUpperCase() }}</span>
        </el-avatar>
        <div class="flex flex-col justify-center gap-y-2">
          <span class="text-xl">欢迎使用智慧景区管理系统，让旅游更智能！</span>
          <span class="text-sm text-dark-1 dark-text-gray-3">智慧景区管理平台 - 为游客提供更好的旅游体验</span>
        </div>
      </div>
    </div>

    <div class="justify-between lg:flex">
      <div class="mine-card w-auto lg:w-8/12">
        <div class="text-base">
          <div>智慧景区解决方案</div>
        </div>
        <div class="grid grid-cols-1 mt-3 lg:grid-cols-3">
          <div class="run-list">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:map-location" :size="30" />
              <div>
                智能导览系统
              </div>
            </div>
            <div class="desc">
              提供AR实景导航、语音讲解、智能路线规划等功能，让游客轻松游览景区的每个角落。
            </div>
          </div>
          <!-- <div class="run-list">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:tickets" :size="30" />
              <div>
                智慧票务系统
              </div>
            </div>
            <div class="desc">
              支持在线预约、实名购票、电子票务、智能验票等功能，提高景区票务管理效率。
            </div>
          </div> -->
          <div class="run-list !b-r-0">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:data-analysis" :size="30" />
              <div>
                客流分析系统
              </div>
            </div>
            <div class="desc">
              实时监控游客流量，智能预警拥堵情况，为景区管理提供科学决策依据。
            </div>
          </div>
          <div class="run-list !lg:b-b-0">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:camera-filled" :size="30" />
              <div>
                智能监控系统
              </div>
            </div>
            <div class="desc">
              采用AI视频分析技术，实现景区安防监控、异常行为识别、紧急事件预警等功能。
            </div>
          </div>
          <div class="run-list !lg:b-b-0">
            <div class="flex items-center gap-x-3">
              <ma-svg-icon name="ep:service" :size="30" />
              <div>
                游客服务系统
              </div>
            </div>
            <div class="desc">
              提供智能客服、失物招领、紧急求助等功能，为游客提供全方位的智能服务支持。
            </div>
          </div>
          
        </div>
      </div>
      <div class="mine-card w-auto !ml-3 lg:w-4/12 !lg:ml-0">
        <div class="text-base">
          <div>智慧景区平台介绍</div>
        </div>
        <div class="mt-3 p-2 text-sm leading-6">
          智慧景区管理平台致力于打造现代化、智能化的景区管理系统，通过数字化转型提升游客体验和管理效率。
          我们的目标是：<el-text type="primary">
            用科技创新提升旅游体验，让每位游客享受智慧旅游带来的便利。
          </el-text>
        </div>
        <div class="p-2 text-sm text-gray-5 dark-text-[#ccc]">
          <ul class="ma-link">
            <li>
              平台特点：
              <el-text type="success">全面的智慧化解决方案</el-text>
            </li>
            <li>
              核心优势：
              <el-text type="success">数据驱动的科学管理</el-text>
            </li>
            <li>
              服务对象：
              <el-text type="success">景区管理者和游客</el-text>
            </li>
            <li>
              技术支持：
              <el-text type="success">7x24小时专业服务</el-text>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <workbench-login />
  </div>
</template>

<style lang="scss" scoped>
.run-list {
  @apply b-1 b-solid b-gray-1 dark-b-dark-3 p-3 b-l-0 b-t-0 b-r-0 lg:b-r-1
  transition-all duration-300
  hover-shadow dark-hover-shadow-dark-3
  ;

  .desc {
    @apply mt-3 text-sm leading-6 dark-text-[#888] text-gray-5
  }
}

.ma-link li {
  @apply flex items-center py-1.5;
}
</style>
